<template>
  <view>
    <my-search></my-search>
    <view class="scroll-container">
      <view class="scroll-left">
        <scroll-view  scroll-y="true" :style="{height: clientW + 'px'}" >
          <view v-for="(item,index) in cateData" :key="index" :class="['scroll-left-item',isActive === index ? 'active' : '']" @click="switchTab(index)">{{item.cat_name}}</view>
        </scroll-view>
      </view>
      <view class="scroll-right">
        <scroll-view :scroll-top="scrollTop" scroll-y="true" :style="{height: clientW + 'px'}" >
          <view v-for="(item,index) in cateFloorOne" :key="index" class="scroll-right-container">
            <view class="scroll-right-title">/{{item.cat_name}}/</view>
            <view class="scroll-right-item-container">
              <view class="scroll-right-item" v-for="(child,i) in item.children" :key="i" @click="switchPages(child)">
                <image :src="child.cat_icon"></image>
                <text>{{child.cat_name}}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
  import mixin from '@/mixin'
  const utils = require('../../common/tools')
  export default {
    mixins: [mixin],
    data() {
      return {
        clientW: 0,
        isActive: 0,
        // 竖向滚动条位置
        scrollTop: 0,
        cateData: [],
        cateFloorOne: []
      };
    },
    onLoad() {
      // 获取可用的高度
      const systemInfo = uni.getSystemInfoSync()
      // console.log(systemInfo)
      // 可用的高度需要减去搜索区域的高度，因为可用区域包含了搜索区域的高度
      this.clientW = systemInfo.windowHeight - 40
      // 获取分类的数据
      this.getCateData()
    },
    methods: {
      async getCateData() {
        const {
          data
        } = await uni.$http.get('/categories')
        if (data.meta.status !== 200) return
        this.cateData = data.message
        this.cateFloorOne = data.message[0].children
      },
      // 点击左侧分类，进行右侧页面的改变以及isActive的改变
      switchTab(index) {
        this.isActive = index
        // 改变cateFloorOne的数据
        this.cateFloorOne = this.cateData[index].children
        // 点击了之后，将滚动条的位置置0
        this.scrollTop = this.scrollTop === 0 ? 1 : 0
      },
      switchPages(child){
        // console.log(query)
        // utils._navigatorTo('/subPackages/goods-list/goods-list',{query:child.cat_name,cid:child.cat_id })
        utils._navigatorTo('/subPackages/goods-list/goods-list',{cid:child.cat_id })
      }
    }
  }
</script>

<style lang="scss">
  .scroll-container {
    display: flex;

    .scroll-left {
      width: 100px;

      .scroll-left-item {
        line-height: 60px;
        text-align: center;
        background-color: #f7f7f7;
        font-size: 12px;

        &.active {
          background-color: #fff;
          position: relative;

          &::before {
            position: absolute;
            top: 50%;
            left: 0;
            transform: translateY(-50%);
            display: block;
            content: '';
            width: 3px;
            height: 30px;
            background-color: #c00000;
          }
        }
      }
    }

    .scroll-right {
      flex: 1;
      background-color: #fff;

      .scroll-right-container {
        width: 100%;
        font-weight: 700;
        text-align: center;
        font-size: 14px;
        .scroll-right-title{
          margin: 6px 0;
        }
        .scroll-right-item-container {
          display: flex;
          flex-wrap: wrap;

          .scroll-right-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 33.33%;
            margin:5px 0;

            image {
              width: 130rpx;
              height: 130rpx;
            }
            text{
              font-weight: 400;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
</style>
